<!--
 - MineAdmin is committed to providing solutions for quickly building web applications
 - Please view the LICENSE file that was distributed with this source code,
 - For the full copyright and license information.
 - Thank you very much for using MineAdmin.
 -
 - @Author X.Mo<root@imoi.cn>
 - @Link   https://gitee.com/xmo/mineadmin-vue
-->
<template>
  <div class="ma-content-block">
    <a-space class="flex">
      <a-button type="primary" @click="visible = true">
        <template #icon><icon-select-all /></template>{{ props.text }}
      </a-button>
      <a-input-tag v-model="userList" v-if="props.isEcho" :style="{ width:'320px' }" :placeholder="'请点击前面按钮' + props.text" :max-tag-count="3" disabled/>
    </a-space>

    <a-modal v-model:visible="visible" width="1000px" draggable :on-before-ok="close" unmountOnClose>
      <template #title>{{ props.text }}</template>

      <ma-crud
          ref="crudRef"
          :options="crud"
          :columns="columns"
          v-model:selected-keys="selecteds"
          @selection-change="selectHandler"
      >
        <template #cover="{ record }">
          <a-avatar shape="square">
            <img :src="record.cover?record.cover:'/nopic.png'" style="object-fit: cover" />
          </a-avatar>
        </template>
      </ma-crud>
    </a-modal>
  </div>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue'
import commonApi from '@/api/common'
import { Message } from '@arco-design/web-vue'
import { isArray, isEmpty } from 'lodash'


import configProduct from '@/api/config/configProduct'
const props = defineProps({
  modelValue: { type: Array },
  isEcho: { type: Boolean, default: false },
  multiple: { type: Boolean, default: true },
  onlyId: { type: Boolean, default: true },
  text: { type: String, default: '选择产品' }
})

const emit = defineEmits(['update:modelValue', 'success'])

const visible = ref(false)
const selecteds = ref([])
const userList = ref([])

onMounted(async () => {

  if (props.isEcho && props.onlyId) {
    selecteds.value = props.modelValue
    const response = await configProduct.getByIds({ ids: selecteds.value })
    if (! isEmpty(response) && isArray(response.data)) {
      userList.value = response.data.map( item => {
        return `${item.name}(${item.id})`
      })
      if (props.onlyId) {
        console.log('---1--1---',selecteds.value)
        emit('update:modelValue', selecteds.value)
      } else {
        console.log('---2--2---',response.data)
        emit('update:modelValue', response.data)
      }
      emit('success', true)
    }
  }
})

watch(
    ()  => props.modelValue,
    val => {
         if (props.isEcho && props.onlyId) selecteds.value = val
    }
)

const selectHandler = (rows) => {
console.log('----x--11----x---')
  console.log(props.modelValue)
  console.log('----x------x---')
  if(rows.length>0){
    rows=props.modelValue;
    selecteds.value = rows
  }else{
    if(props.modelValue){
      rows.push(props.modelValue)
    }
    selecteds.value = props.modelValue
  }

}

const close = async (done) => {
  if (isArray(selecteds.value) && selecteds.value.length > 0) {
    const response = await configProduct.getByIds({ ids: selecteds.value })
    if (! isEmpty(response) && isArray(response.data)) {
      userList.value = response.data.map( item => {
        return `${item.name}(${item.id})`
      })
      if (props.onlyId) {
        emit('update:modelValue', selecteds.value)
      } else {
        emit('update:modelValue', response.data)
      }
      emit('success', true)
      Message.success('选择成功')
    }
  } else {
    emit('update:modelValue', [])
    userList.value = []
  }
  done(true)
}

const crud = ref({
  showIndex: false,
  api: configProduct.getList,
  searchColNumber:3,
  rowSelection:  { type: 'radio' },
  beforeRequest: (params) => {
    params.source_type = 1
  }
})

const columns = ref([
  {
    title: "ID",
    dataIndex: "id",
    width:60,
    formType: "input"
  },
  {
    title: "产品名称",
    width:220,
    dataIndex: "name",
    formType: "input",
    search: true
  },
  {
    title: "产品图片",
    dataIndex: "cover",
    formType: "input"
  },
  {
    title: '产品价格',
    dataIndex: 'price_range',
    // 以下两个参数是必要条件，第一：要开启搜索，第二：组件类型必须为 input-number
    formType: 'input-number',
    search: true,
    hide:true,
    // 开启区间搜索，搜索时会自动对字段名后面加 min 和 max，在生成代码时可以给组件搜索配置为 between
    // 请求数据示例 { pointMin: 111, pointMax: 222 }
    rangeSearch: true,
  },
  {
    title: '原价价格',
    dataIndex: 'amount_price_range',
    // 以下两个参数是必要条件，第一：要开启搜索，第二：组件类型必须为 input-number
    formType: 'input-number',
    hide:true,
    search: true,
    // 开启区间搜索，搜索时会自动对字段名后面加 min 和 max，在生成代码时可以给组件搜索配置为 between
    // 请求数据示例 { pointMin: 111, pointMax: 222 }
    rangeSearch: true,
  },
  {
    title: "产品价格",
    dataIndex: "price",
    formType: "input"
  },
  {
    title: "产品原价",
    dataIndex: "origin_price",
    formType: "input"
  }
])
</script>

<style scoped>
:deep(.arco-tabs-nav-type-capsule .arco-tabs-nav-tab) {
  justify-content: flex-start;
}
</style>